<template>
 <div class='page'>
   <h1 style="height: 100px; line-height: 100px; text-align: center;">测试视频组件</h1>
   <div style="height:100px;width:100%;text-align:center">
     <label>显示分割</label>
     <Select v-model="showNum" style="width:100px">
        <Option v-for="item in splitList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
     <label>视频类型</label>
     <Select v-model="showType" style="width:100px">
        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <Button type="info" @click="showType = functionList">方法数组</Button>
    <Button type="info" @click="isShowNum = !isShowNum">显示编号</Button>
   </div>
   <div style="height: calc(100% - 200px)">
     <video-plugin :videoType="showType" :pluginCount="videoCount" :defaultShowscreen="showNum" :showNum="isShowNum"></video-plugin>
   </div>
 </div>
</template>

<script>
import VideoPlugin from '@/compoents/VideoPlugin/VideoPlugin'
export default {
  name: 'TestBsVideo',
  components: {
    VideoPlugin
  },
  data () {
    return {
      videoCount: 16,
      showNum: 4,
      showType: '预览',
      isShowNum: false,
      splitList: [
        {
          value: 1,
          label: '一分割'
        },
        {
          value: 4,
          label: '四分割'
        },
        {
          value: 6,
          label: '六分割'
        },
        {
          value: 8,
          label: '八分割'
        },
        {
          value: 9,
          label: '九分割'
        },
        {
          value: 16,
          label: '16分割'
        }
      ],
      typeList: [
        {
          value: '预览',
          label: '预览'
        },
        {
          value: '回放',
          label: '回放'
        },
        {
          value: '报警',
          label: '报警'
        },
        {
          value: '电视墙',
          label: '电视墙'
        }
      ],
      functionList: [
        'open',
        'stop'
      ]
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {

  },
  created () {

  }
}
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%
}
</style>
